﻿@{
    ViewBag.Title = "SpriteSheet";
    Layout = "~/Views/Shared/_EaselPage.cshtml";
}

<h2>Sprite Sheet</h2>


<script type="text/javascript">
	var stage, w, h, loader;
	var sky, grant, ground, hill, hill2;

	function init() {
		if (window.top != window) {
			document.getElementById("header").style.display = "none";
		}

		stage = new createjs.Stage("testCanvas");
		
		// grab canvas width and height for later calculations:
		w = stage.canvas.width;
		h = stage.canvas.height;

		manifest = [
			{src:"/assets/fatrunjump.png", id:"grant"},
			{src:"/assets/sky.png", id:"sky"},
			{src:"/assets/ground.png", id:"ground"},
			{src:"/assets/parallaxHill1.png", id:"hill"},
			{src:"/assets/parallaxHill2.png", id:"hill2"}
		];

		loader = new createjs.LoadQueue(false);
		loader.addEventListener("complete", handleComplete);
		loader.loadManifest(manifest);
	}

	function handleComplete() {
		document.getElementById("loader").className = "";
		
		sky = new createjs.Shape();
		sky.graphics.beginBitmapFill(loader.getResult("sky")).drawRect(0,0,w,h);
		
		var groundImg = loader.getResult("ground");
		ground = new createjs.Shape();
		ground.graphics.beginBitmapFill(groundImg).drawRect(0, 0, w+groundImg.width, groundImg.height);
		ground.tileW = groundImg.width;
		ground.y = h-groundImg.height;
		
		hill = new createjs.Bitmap(loader.getResult("hill"));
		hill.setTransform(Math.random() * w, h-hill.image.height*3-groundImg.height, 3, 3);
		     
		hill2 = new createjs.Bitmap(loader.getResult("hill2"));
		hill2.setTransform(Math.random() * w, h-hill2.image.height*3-groundImg.height, 3, 3);
	
		var data = new createjs.SpriteSheet({
			"images": [loader.getResult("grant")],
			"frames": {"regX": 0, "height": 400, "count": 24, "regY": 0, "width": 550},
			// define two animations, run (loops, 1.5x speed) and jump (returns to run):
			"animations": 
			{
			    "run": [0, 11, "run", 0.5],
			    "jump": [12, 23, "run", 0.5]
			}
		});
		grant = new createjs.Sprite(data, "run");
		grant.setTransform(-200, 30, 1.2, 1.2);
		grant.framerate = 60;

		stage.addChild(sky, hill, hill2, ground, grant);
		stage.addEventListener("stagemousedown", handleJumpStart);

		createjs.Ticker.timingMode = createjs.Ticker.RAF;
		createjs.Ticker.addEventListener("tick", tick);
	}

	function handleJumpStart() {
	    grant.gotoAndPlay("jump");
	    //data.frames.regY = 50;
	}

	function tick(event) {
		var deltaS = event.delta/1000;
		var position = grant.x+150*deltaS;
		
		var grantW = grant.getBounds().width*grant.scaleX;
		grant.x = (position >= w) ? -grantW : position;
		if (grant.x >= grantW * 2 / 3) {
		    handleJumpStart();
		    grant.y -= 3;
		}
		else {
		    grant.y = 30;
		}

		ground.x = (ground.x-deltaS*200) % ground.tileW;
		hill.x = (hill.x - deltaS*30);
		if (hill.x + hill.image.width*hill.scaleX <= 0) { hill.x = w; }
		hill2.x = (hill2.x - deltaS*45);
		if (hill2.x + hill2.image.width*hill2.scaleX <= 0) { hill2.x = w; }
		
		stage.update(event);
	}
</script>

<div class="canvasHolder">
	<canvas id="testCanvas" width="960" height="400"></canvas>
</div>